<template>
  <div>
    <MHeader>我</MHeader>
    <section class="container">
      <header>
        <div class="background">
          <img :src="data.background" alt="">
        </div>
        <div class="my">
          <img :src="data.headImg" alt="">
          <p>{{data.name}}</p>
        </div>
      </header>
      <section class="content">
        <p>
          <span class="key">角色</span><span class="val">{{data.role|role}}</span>
        </p>
        <p>
          <span class="key">地址</span><span class="val">{{data.address}}</span>
        </p>
        <p>
          <span class="key">联系方式</span><span class="val">{{data.tel}}</span>
        </p>
        <p>
          <span class="key">性别</span><span class="val">{{data.sex?'男':'女'}}</span>
        </p>
        <p>
          <span class="key">有话要说</span><span class="val">{{data.introduction}}</span>
        </p>
      </section>
      <section class="tool">
        <div class="tool_set">
          <div class="set" @click="gd=!gd">
            设
          </div>
          <transition name="information">
            <div class="information" v-show="gd">
              我
            </div>
          </transition>
          <transition  name="add" v-if="data.role==0">
            <div class="add" v-show="gd">
              添
            </div>
          </transition>
        </div>
      </section>
    </section>
    <transition name="fade">
      <TAdd :data="setinformation" v-if="gd" @hide="_tig" @sub="_setMy"></TAdd>
    </transition>
  </div>
</template>
<script>
  import MHeader from '../base/MHeader.vue';
  import TAdd from '../base/TAdd.vue';
  import {getMy,setMy} from '../api';
  export default {
    data() {
      return {
        data:{},//用户数据
        setinformation:[//弹窗数据
            {
              word: '昵称',
              val: '',
              name: 'name',
            },
            {
              word: {
                '管理员':0,
                "商家":1,
                "个体户":2,
                "用户":3,
              },
              title:'角色',//意思
              val: '',
              name: 'role',
              type:'select',
            },
            {
              word: {'男':1, '女':0},
              val: '',
              name: 'sex',
              type:'radio',
              title:'性别',
            },
            {
              word: '手机号码',
              val: '',
              name: 'tel',
            },
            {
              word: '地址',
              val: '',
              name: 'address',
            },
            {
              word: '头像',
              val: '',
              name: 'headImg',
            },
            {
              word: '头部背景图',
              val: '',
              name: 'background',
            },
            {
              word: '备注',
              val: '',
              type:'textarea',
              name: 'introduction',
            },
        ],
        gd:false,//弹窗的隐藏
        sub:false,//保存用户信息间隔
      }
    },
    created() {
      this.getI();
      console.log(this.$store.state.admin);
    },
    methods: {
      async getI(){
        this.data = await getMy(1);
        this.setinformation[0].val = this.data.name;
        this.setinformation[1].val = this.data.role;
        this.setinformation[2].val = this.data.sex;
        this.setinformation[3].val = this.data.tel;
        this.setinformation[4].val = this.data.address;
        this.setinformation[5].val = this.data.headImg;
        this.setinformation[6].val = this.data.background;
        this.setinformation[7].val = this.data.introduction;
      },
      _tig(){
        this.gd = false;
      },
      _setMy(data,sub){
        if(this.$noClick(sub))return;
        data.id = this.data.id;
        this.$ajax({Interface:setMy,data,url:'/'});
      },
    },
    filters:{
      role(role){
        role = parseInt(role);
        switch(role){
          case 0:
            return '管理员';
          case 1:
            return '商家';
          case 2:
            return '个体户';
          case 3:
            return '用户';
        }
      }
    },
    computed: {

    },
    components: {
      MHeader,
      TAdd
    }
  }
</script>
<style scoped lang="scss">
  $set:.9rem;
  $setI:$set/1.2;
  .information-enter,
  .add-enter,
  .information-leave-to,
  .add-leave-to{
    transform:translate(0,0);
  }
  .information-enter-active,.information-leave-active,
  .add-enter-active,.add-leave-active{
    transition:all 1s;
  }

  .container{
    position:relative;
    padding-top:.7rem;
    font-size:.28rem;
    .background{
      height: 4rem;
      img{
        width: 100%;
        height:100%;
      }
    }
    .my{
      position:absolute;
      top: 3.5rem;
      left: 50%;
      transform: translateX(-50%);
      img{
        display:inline-block;
        width: 1.8rem;
        height: 1.8rem;
        border-radius: 50%;
        border: .05rem solid #EEE;
      }
      p{
        text-align:center;
        font-size:.35rem;
      }
    }
    .content{
      margin-top:1.5rem;
      p{
        padding:.2rem .3rem;
        span{
          display:inline-block;
        }
        .key{
          text-align-last:justify;
          width:1.2rem;
          margin-right:.2rem;
          font-weight: 600;
        }
      }
    }
    .tool{
      padding:.2rem .3rem;
      color: #fff;
      text-align: center;
      margin-top: .6rem;
      .tool_set{
        position: relative;
        div{
          border-radius:50%;
          position:absolute;
          width:$setI;
          height:$setI;
          line-height:$setI;
        }
        .set{
          background:radial-gradient(circle at $set/3 $set/3, #c2d6eb,#5781c8,#aef6bc);
          width: $set;
          height: $set;
          font-size: .3rem;
          line-height:$set;
          z-index:2;
        }
        .information{
          transform: translate(50%, -120%);
          background:radial-gradient(circle at $setI/3 $setI/3, #e2e4eb, #5ab5b0, #f6beee);
        }
        .add{
          transform: translate(140%,-80%);
          background:radial-gradient(circle at $setI/3 $setI/3, #19eb90, #969bc8, #f6820d);
        }
      }
    }

  }
</style>
